<!--  登录页 -->
<script setup lang="ts">
import { ref } from 'vue'
import { useAuth } from '@/biz/hooks/useAuth'
import { ILoginInfo } from '@biz/repo'

const onClickLeft = () => history.back()
const username = ref('')
const password = ref('')
const { loginFunc } = useAuth()
const onSubmit = async (values: ILoginInfo) => {
  //流程：点击提交，请求接口，如果正确，则返回token并且返回到上一个页面
  //请求接口
  await loginFunc(values)
  //返回上一个页面
  onClickLeft()
}
</script>

<template>
  <div class="login-page op-fullscreen">
    <VanNavBar title="请登录" left-text="返回" left-arrow @click-left="onClickLeft" />
    <VanForm class="login-page__form" @submit="onSubmit">
      <VanCellGroup inset>
        <VanField
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <VanField
          v-model="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </VanCellGroup>
      <div style="margin: 16px">
        <VanButton class="login-submit__button" round block type="primary" native-type="submit"
          >提交</VanButton
        >
      </div>
    </VanForm>
  </div>
</template>

<style lang="scss" scoped>
.login-page__form {
  margin-top: 100px;
}
</style>
